 import React, { Component } from 'react';
 import Swiper from 'react-id-swiper';
 import '../css/swiper.css'
 import '../css/style.css'
 import Tabs from './Tabs';
 import Zhishu from './Zhishu';
 import Bk from './Bk';
 import News from './News';
 import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom'

 class HKPage extends Component {
    constructor(props) {
        super(props);
        this.swiper = null
        this.state={
            silderIndex:1
        }
        this.tabsClassNames=['hk','hk','hk','hk']
    }
    transitionEnd = () => {

        this.setState({
            silderIndex: this.swiper.realIndex
        })
        console.log(this.state.silderIndex)
    }
     render() {
         console.log(this.state.silderIndex)
         return (
             <div>
                 <Tabs index={this.state.silderIndex} />
                 <div className={this.tabsClassNames[this.state.silderIndex]}>
                     <Swiper on={{transitionEnd:this.transitionEnd}} ref={node =>  node ? this.swiper = node.swiper:"" } >
                         <div>
                            {this.props.txt}
                         </div>
                         <div>
                             2222
                             <Zhishu txt={222222}/>
                             
                         </div>
                     </Swiper>
                 </div>
            </div>
         );
     }
 }
 
 export default HKPage;